<template>
  <div class="app-container">
    <div class="container">
      <div class="main page page-list">
        <div class="head-container">
          <el-card shadow="never">
            <div class="search-bar pd">
              <el-form :inline="true" :model="searchModel" size="mini" class="demo-form-inline">
                <el-form-item label="开通状态">
                  <el-radio-group @change="search(1)" v-model="searchModel.bookStatus">
                    <el-radio-button label="">不限</el-radio-button>
                    <el-radio-button label="0">未开通</el-radio-button>
                    <el-radio-button label="1">已开通</el-radio-button>
                  </el-radio-group>
                </el-form-item>

                <el-form-item label="支付宝主体名称">
                  <el-input size="mini" v-model="searchModel.alipayName" placeholder="支付宝主体名称"></el-input>
                </el-form-item>

                <el-form-item label="企业支付宝账号">
                  <el-input size="mini" v-model="searchModel.alipayNickName" placeholder="企业支付宝账号"></el-input>
                </el-form-item>

                <el-form-item class="operations">
                  <el-button type="primary" @click="search">查询</el-button>
                  <el-button type="default" @click="reset">重置</el-button>
                </el-form-item>
              </el-form>
            </div>
          </el-card>
        </div>
        <div class="m-b-8">
          <el-button type="primary" icon="el-icon-plus" @click="applyBook"
            v-permission="['ADMIN', 'safe-pay-book-pre-apply-record::apply']">记账本开通</el-button>
        </div>
        <div class="data-list-wrap">
          <el-card shadow="never">
            <el-table v-loading="loading" :data="list" size="mini" style="width: 100%">
              <el-table-column prop="createTime" label="创建时间" />
              <el-table-column prop="externalAgreementNo" label="申请单号" />
              <el-table-column prop="alipayName" label="支付宝主体名称">
              </el-table-column>
              <el-table-column prop="alipayNickName" label="企业支付宝账号">
              </el-table-column>

              <el-table-column prop="signTime" label="开通通过时间">
                <template slot-scope="scope">
                  {{ scope.row.signTime ? scope.row.signTime : '-' }}
                </template>
              </el-table-column>

              <el-table-column prop="bookStatus" label="记账本挂载状态">
                <template slot-scope="scope">
                  <span v-if="!scope.row.mounted">未挂载</span>
                  <span v-if="scope.row.mounted" class="text-success">已挂载</span>
                  <div v-if="scope.row.mounted" class="text-info">{{scope.row.mountedUserId}}</div>
                  <div v-if="scope.row.mounted" class="text-info">{{scope.row.mountedTime}}</div>
                </template>
              </el-table-column>

              <el-table-column prop="bookStatus" label="开通状态">
                <template slot-scope="scope">
                  <span v-if="scope.row.bookStatus === 0">未开通</span>
                  <span v-if="scope.row.bookStatus === 1" class="text-success">已开通</span>
                </template>
              </el-table-column>

              <el-table-column prop="applyUrl" label="开通链接">
                <template slot-scope="scope">
                  <el-button type="text" @click="doCopy(scope.row, $event)">复制开通链接</el-button>
                  <div class="text-info">链接失效时间：{{ scope.row.deadline }}</div>
                </template>
              </el-table-column>

              <el-table-column fixed="right" label="操作" width="180">
                <template slot-scope="scope">
                  <div>
                    <el-button v-if="scope.row.bookStatus === 1 && !scope.row.mounted" v-permission="['ADMIN', 'safe-pay-book-pre-apply-record::mount']"
                       type="text" @click="mountBook(scope.row.id)">
                      挂载
                    </el-button>
                  </div>
                </template>
              </el-table-column>

            </el-table>
            <div class="paging-wrap">
              <el-pagination :current-page="searchModel.pageNo" :page-sizes="[10, 20, 50, 100]"
                :page-size="searchModel.pagesize" :total="searchModel.count"
                layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange"
                @current-change="handleCurrentChange" />
            </div>
          </el-card>
        </div>

      </div>
    </div>

    <!-- 记账本开通 -->
    <el-dialog title="记账本开通" :close-on-click-modal="false" :modal-append-to-body="false" class="dialog-action"
      width="50%" :visible.sync="applyBookDialog">
      <el-form :model="applyForm" label-width="150px" :rules="rules" ref="applyForm">
        <el-form-item label="企业支付宝账号" prop="alipayNickName" required>
          <el-input v-model="applyForm.alipayNickName" placeholder="企业支付宝账号"></el-input>
        </el-form-item>
        <el-form-item label="支付宝主体名称" prop="alipayName" required>
          <el-input v-model="applyForm.alipayName" placeholder="支付宝主体名称"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="applyBookDialog = false">取 消</el-button>
        <el-button :loading="opLoading" type="primary" @click="doApplyBook">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import clipboard from "../../utils/clipboard";
import { mountSafePayBookPreApplyRecord, searchSafePayBookPreApplyRecord, preApplySafePayBook } from '@/api/business'
const defaultModel = {
  pageNo: 1,
  count: 0,
  pageSize: 10,
  bookStatus: ""
}
export default {
  components: {},
  data() {
    return {
      searchModel: _.cloneDeep(defaultModel),
      list: [],
      loading: false,
      opLoading: false,
      applyForm: {},
      applyBookDialog: false,
      rules: {
        alipayNickName: [
          { required: true, message: "请输入企业支付宝账号", trigger: "blur" },
        ],
        alipayName: [{ required: true, message: "请输入支付宝主体名称", trigger: "blur" }],
      },

    }
  },
  mounted() {
    this.init()
  },
  methods: {
    //复制链接
    doCopy(row, e) {
      let name = "支付宝主体名称：" + row.alipayName
      let alipayNickName =  "企业支付宝账号：" + row.alipayNickName
      let url = "签约链接：" + row.applyShortUrl;
      let remark1 =  `1.请使用企业支付宝${row.alipayNickName}登录签约，不要用个人支付宝扫码登录；`
      let remark2 =  `2.如果登录错账号，请退出登录，并重新在浏览器中黏贴上方签约链接打开后再用企业支付宝${row.alipayNickName}登录；`
      let doc = "签约教程：https://www.yuque.com/alipaybhd8fvdaz5/lbezo6/gnfrsvdpxkib9qh5?singleDoc# 《安全发签约教程》 密码：cgid"
      let info = name + "\n" + alipayNickName + "\n" +  url + "\n" + remark1 + "\n" + remark2  + "\n" + doc;
      clipboard(info, e);
    },

    mountBook(id) {
      mountSafePayBookPreApplyRecord({id}).then(resp => {
        if (resp.success) {
          this.$notify({
              title: "挂载成功",
              type: "success",
              duration: 2500,
          });
          this.search()
        }
      })
    },

    applyBook() {
      this.applyForm = {
        alipayName: "",
        alipayNickName: ""
      }
      this.applyBookDialog = true;
    },

    doApplyBook() {
      this.$refs["applyForm"].validate((valid) => {
        if (valid) {
          this.opLoading = true;
          
          preApplySafePayBook(this.applyForm)
            .then((resp) => {
              if (resp.success) {
                this.$notify({
                  title: "创建成功",
                  type: "success",
                  duration: 2500,
                });
                this.applyBookDialog = false;
                this.search();
              }
              this.opLoading = false;
            })
            .catch((err) => {
              console.log(err);
              this.opLoading = false;
            });
        } else {
          return false;
        }
      });
      
    },

    search() {
      this.getList(1)
    },

    getList(pageNo) {
      this.loading = true
      if (pageNo != undefined) {
        this.searchModel.pageNo = pageNo
      }

      const searchModel = _.cloneDeep(this.searchModel)
      searchSafePayBookPreApplyRecord(this.compileSearchModel(searchModel))
        .then((resp) => {
          this.searchModel.count = resp.count
          this.list = resp.data
          this.loading = false
        })
        .catch((err) => {
          console.log(err)
        })
    },
    reset() {
      this.searchModel = _.cloneDeep(defaultModel)
      this.getList(1)
    },
    compileSearchModel(searchModel) {
      searchModel.pageNo = searchModel.pageNo - 1
      return searchModel
    },
    // 修改分页
    handleSizeChange(val) {
      this.searchModel.pageSize = val
      this.getList(1)
    },
    // 修改页面
    handleCurrentChange(val) {
      this.getList(val)
    },

    initSearchData() {
      listOperationRecordModule().then(resp => {
        this.modules = resp.data
      })
    },
    init() {
      this.getList(1)
    }
  }
}
</script>

<style lang="scss" scoped></style>
